<template>
  <div>{{ time }}</div>
</template>

<script>
import { reactive, toRefs, watch, onMounted, onUnmounted } from 'vue'
import { formatPast } from '/@/utils/formatTime'
export default {
    name: 'Utime',
    props: {
        value: {
            type: String,
            default: null
        }
    },
    setup(props) {
        const { value } = toRefs(props)
        const state = reactive({
            time: '',
            timeout: null
        })
        const setTime = () => {
            state.time = formatPast(value.value)
            let time = new Date().getTime()
            let inTime = new Date(value.value.replace(/-/g, '/')).getTime()
            clearInterval(state.timeout)
            if (time - inTime > 35 * 60 * 1000) {
                return
            }
            state.timeout = setTimeout(() => {
                setTime()
            }, 60 * 1000)
        }
        watch(() => value.value,
            () => {
                setTime()
            }
        )
        onMounted(() => {
            setTime()
        })
        onUnmounted(() => {
            clearInterval(state.timeout)
        })
        return {
            ...toRefs(state),
            setTime
        }
    }
}
</script>